<template>
	<view class="find">
		<z-paging :paging-style="{'padding-left':'3%','padding-bottom':'60rpx'}" width="94%" ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<tui-navigation-bar  @init="initNavigation" :style="{ marginTop: top + 'px' }" :isFixed="false" :isOpacity="false" backgroundColor="#fff">
					<view class="serach-bar">
						<tui-searchbar radius="40rpx" height="60rpx" padding="4rpx 0rpx" :cancel="false" backgroundColor="#fff"
								inputBgColor="#f5f5f5" placeholder="请输入关键词/用户昵称/用户ID" @input="input" @search="search" @clear="clearInput">
				    	</tui-searchbar>
					</view>
					 
				</tui-navigation-bar>
				<tutor-tab-1 :list="['推荐','关注']" @clickSwtichTab="clickSwtichTab" :atciveIndex="atciveIndex"
					padding="28rpx 0 50rpx 0">
					<!-- <image class="icon-add" src="../../static/user/icon_add@2x.png" v-if="atciveIndex==0" @click="toPushDynamic"></image> -->
				</tutor-tab-1>
			</template>
			<view class="find-con">
				<!-- 推荐 -->
				<template  v-if="!atciveIndex">
					<FindDynamicItems :ossUrl="ossUrl" v-for="(item,index) in dataList" :key="index" :item="item" @clickDetail="toDynamicDetail"></FindDynamicItems>
				</template>
			 
				<!-- <tui-waterfall :listData="dataList" v-if="!atciveIndex">
					<template v-slot:left="{ list }">
						<FindDynamicItems :ossUrl="ossUrl" v-for="(item,index) in list" :key="index" :item="item" @clickDetail="toDynamicDetail"></FindDynamicItems>
					</template>
					<template v-slot:right="{ list }">
						<FindDynamicItems :ossUrl="ossUrl" v-for="(item,index) in list" :key="index" :item="item" @clickDetail="toDynamicDetail"></FindDynamicItems>
					</template>
				</tui-waterfall> -->
				<!-- 关注 -->
				<tui-list-view unlined="all" v-else>
					<AttentionItem :ossUrl="ossUrl" @clickDetail="toUserHome" :dataList="dataList"></AttentionItem>
				</tui-list-view>
			</view>
		</z-paging>
		<tui-tabbar @clickTabbar="clickTabbar"></tui-tabbar>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import AttentionItem from './compontents/attentionItem.vue'
	import FindDynamicItems from './compontents/findDynamicItems.vue'
	import {getDynamicRecommendationsList,getMyAttentionList,collectDynamic} from "@/http/api/index/index.js"
	import Cache from '@/utils/cache'
	export default {
		components: {
			AttentionItem,
			FindDynamicItems
		},
		data() {
			return {
				ossUrl: getApp().globalData.ossurl,// 图片前缀
				atciveIndex: 0,
				top: 0, //标题图标距离顶部距离
				marginTp:0,
				dataList: [],
				searchValue: ''// 搜索框输入的值
			}
		},
		onShow(){
			this.$nextTick(()=>{
				this.$refs.paging.reload();

			})
		},
		onLoad() { 
			this.setTabBarIndex({
				index: 2
			})
		},
		methods: {
			...mapMutations(['changeTabItem','setTabBarIndex', 'changeTabBar']),
			initNavigation(e) {
			 		this.top = e.top;
					this.marginTp =e.height
			},
			clickTabbar(detils) {
				this.changeTabBar(detils)
				console.log(detils, '点击') 
			},
			// 搜索框相关事件
			search(e) {
				this.searchValue = e.value;
				this.$refs.paging.reload();
			},
			clearInput() {
				this.searchValue = '';
				this.$refs.paging.reload();
			},
			input(e) {
				this.searchValue = e.value;
				this.$refs.paging.reload();
			},
			// 关注和推荐切换
			clickSwtichTab(data) {
				if(data.index===1){// 关注，先看是否登录
					const token =Cache.get('access_token')
					if(!token){
						uni.showModal({
							title: '暂未登录',
							content: '请登录',
							confirmText: '前往登录',
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: '/pages/mine/modules/userLogin/userLogin'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
						return;
					}
				}
				this.atciveIndex = data.index
				this.$refs.paging.reload();
			},
			// 动态详情
			toDynamicDetail(e) {
				let dynamicId = e.dynamicId
				const token =Cache.get('access_token')
				if(!token){
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/find/modules/recommendDetails/recommendDetails?dynamicId='+dynamicId
					})
				}
			},
			// 跳转到用户主页
			toUserHome(e) { 
				uni.navigateTo({
					url: '/pages/index/modules/tutorDetails/tutorDetails?id=' + e.id
				})
			},
			// 跳转到发布动态页
			toPushDynamic() {
				const token =Cache.get('access_token')
				if(token){
					uni.navigateTo({
						url: '/pages/find/modules/pushDynamic/pushDynamic'
					})
				}else{
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			// 数据分页
			queryList(pageNo, pageSize) {
				if(!this.atciveIndex){
					// 推荐列表数据
					getDynamicRecommendationsList({
						pageNum: pageNo,
						pageSize: pageSize,
						releaseContent: this.searchValue
					}).then(res => {
						if (res.code == 200) {
							 this.$refs.paging.complete(res.rows); 
						} else {
							this.$utils.toast(res.msg);
						}
					}).catch(res => {
						this.$refs.paging.complete(false);
					})
				}else{
					// 关注列表数据
					getMyAttentionList({
						pageNum: pageNo,
						pageSize: pageSize
						//userId: Cache.get("userId")
					}).then(res => {
						if (res.code == 200) {
							 this.$refs.paging.complete(res.rows); 
						} else {
							this.$utils.toast(res.msg);
						}
					}).catch(res => {
						this.$refs.paging.complete(false);
					})
				}
			},
			// 收藏、取消收藏动态
			collectDynamicFunc(e){
				collectDynamic({
					id: e.id,
					userId: Cache.get("userId"),
					queryType: e.isCollection?"1":"2" //queryType  1收藏，2取消
				}).then(res => {
					if (res.code == 200) {
						 this.$refs.paging.reload();
					} else {
						this.$utils.toast(res.msg);
					}
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.find {
		width: 94%;
		padding-left: 3%;
		padding-right: 3%;
		padding-bottom: 220rpx;
		background-color: #fff !important;
		height:90vh;

		/* 搜索框 */
		.serach-bar {
			width: 91%;
			margin-left: 3%;
		}

		/* 推荐 */
		.icon-add {
			width: 45rpx;
			height: 45rpx;
		}

		.recommend-nickname__img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50rpx;
			margin-right: 10rpx;
		}

		.icon-pinglun {
			width: 30rpx;
			height: 30rpx;
		}

		.tui-tag {
			line-height: unset;
		}
	}
</style>